<template>
	<div id="Certification">
		<x-header :left-options="{showBack: false}" title="店铺认证" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="title-bar">
			<img :src="member_thumb" alt="" />
			<div class="desc">
				<p>{{certInfo.member_nickname}}</p>

				<span v-if="certInfo.credit_type == 'certify'">
					已申请企业认证
					<i v-if="certInfo.identity.identity_state == 1 && certInfo.certify.certify_state == 1 " style="font-style: normal;color: #a30000;">已通过</i>
					<i v-else style="font-style: normal;color: #a30000;">待审核</i>
				</span>

				<span v-else-if="certInfo.credit_type == 'identity'">
					已申请个人认证
					<i v-if="certInfo.identity.identity_state == 0" style="font-style: normal;color: #a30000;">待审核</i>
					<i v-else style="font-style: normal;color: #a30000;">已通过</i>
				</span>

				<span v-else>尚未进行实名认证  请立即认证>>></span>

			</div>
		</div>
		<div class="apply">
			<div class="cert-title">
				<h2>申请认证</h2>
				<ul>
					<router-link to="/OtherCert">
						<li>
							<img src="../../assets/images/home/icon_user.png" alt="" />
							<span>个人认证</span>
						</li>
					</router-link>
					<router-link to="/UserCert">
						<li>
							<img src="../../assets/images/home/icon_admin.png" alt="" />
							<span>管理员认证</span>
						</li>
					</router-link>
					<router-link to="/StoreCert">
						<li>
							<img src="../../assets/images/home/icon_home.png" alt="" />
							<span>商户认证</span>
						</li>
					</router-link>

				</ul>
			</div>
		</div>
		<div class="explain">
			<div class="cert-title">
				<h2>认证说明</h2>
			</div>
			<div class="content">
				<p class="desc">1.零门槛上拍 只需实名认证即可进行上拍，让您的宝贝价值得到体现</p>
				<p class="desc">2.好文玩专注艺术品交流交易，为艺术品爱好者、收藏家、设计师、从业者搭建专业便捷的交流交易平台，通过拍卖、零售、订制、社群、论坛/问答等多样化形式，以好文玩为媒，让艺术品遇上知音！</p>
				<p class="desc">3.如有疑问 请拨打电话：<a href="tel:18595735888">18595735888</a> 请备注好文玩</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		data() {
			return {
				certInfo: '',
				member_thumb: ''
			}
		},
		components: {
			XHeader
		},
		activated() {
			this.getCertInfo();
		},
		methods: {
			getCertInfo: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/credit.json',
					data: ''
				}).then((result) => {
					console.log(result);
					this.certInfo = result.data;
					if(this.certInfo.member_thumb.indexOf('/uploads') == 0) {
						this.member_thumb = '/los' + this.certInfo.member_thumb;
					} else {
						this.member_thumb = this.certInfo.member_thumb;
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			back: function() {
				location.href = "#/User"
			}
		}
	}
</script>

<style scoped>
	.title-bar {
		width: 100%;
		height: 1.86rem;
		padding: 0.26rem;
		overflow: hidden;
		background: #fff;
		margin-top: 0.26rem;
	}

	.header {
		background: #fff;
	}

	.title-bar img {
		float: left;
		width: 1.33rem;
		height: 1.33rem;
		border-radius: 0.05rem;
	}

	.title-bar .desc {
		float: left;
		height: 100%;
		width: 82%;
		margin-left: 0.24rem;
	}

	.title-bar .desc p {
		line-height: 0.82rem;
		height: 0.82rem;
		font-size: 0.4rem;
		color: #333;
	}

	.title-bar .desc span {
		display: block;
		line-height: 0.53rem;
		height: 0.53rem;
		font-size: 0.32rem;
		color: #aaa;
	}

	.apply {
		width: 100%;
		height: 5.81rem;
		background: #fff;
		margin-top: 0.26rem;
	}

	.apply ul {
		overflow: hidden;
		width: 100%;
		height: 4.5rem;
	}

	.apply ul li {
		float: left;
		/*padding: 0.8rem;*/
		padding: 0.37rem;
		margin-left: 0.42rem;
	}

	.apply ul li img {
		/*width: 2.26rem;*/
		height: 2rem;
		width: 2rem;
	}

	.apply ul li span {
		display: block;
		font-size: 0.37rem;
		color: #333;
		line-height: 0.4rem;
		text-align: center;
	}

	.cert-title {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		padding: 0 0.26rem;
	}

	.cert-title h2 {
		position: relative;
	}

	.cert-title h2:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.3rem;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	.explain {
		margin-top: 0.26rem;
		background: #fff;
		height: 100%;
		padding-bottom: 1rem;
	}

	.explain .content {
		padding: 0.26rem;
		line-height: 0.53rem;
		font-size: 0.34rem;
		color: #777;
	}

	.explain .content .desc {
		text-indent: 2em;
	}
</style>
